<!--
 * @Author: chenzechao
 * @Date: 2024-02-04 09:19:50
 * @LastEditors: chenzechao
 * @LastEditTime: 2024-02-04 15:42:53
 * @FilePath: \accesscontrolui\src\views\xtpz\attendance-group\components\details.vue
 * @Description:
-->
<template>
  <div>
    <panel>
      <template slot="search">
        <el-form :model="searchForm" ref="ruleForm">
          <el-form-item label="考勤组名称" prop="name">
            <el-input placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="应用人员" prop="name">
            <el-radio-group>
              <el-radio :label="3">全部</el-radio>
              <el-radio :label="6">自定义</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </template>
      <template slot="table">
        <div class="group-type">
          <header>考勤类型</header>
          <section class="group-main">
            <el-radio-group v-model="searchForm.name" class="group-radio">
              <el-radio :label="3">固定班制</el-radio>
              <el-radio :label="6">排班制</el-radio>
              <el-radio :label="9">自由班制</el-radio>
            </el-radio-group>
            <div class="group-main-content">
              <section>
                <span>
                  <i class="el-icon-warning-outline"></i>
                  固定班制：应用于每天上班时间都固定不变的。例如：双休的考勤方式即周一~周五，08:30-18:00;单休周一~周六，08:30-18:00;大小周的考勤方式，即一周工作6天一周工作5天，单双休交替循环</span
                >
              </section>
              <section>
                <span>
                  <i class="el-icon-warning-outline"></i>
                  排班制：有多种形式，包括固定班制、三班两倒、四班三倒等。根据企业或组织的需要，可以选择适合的排班方式。例如，对于需要24小时服务的行业，可以采用三班两倒或四班三倒的方式，将一天的工作时间分为两个或三个班次，每个班次工作一段时间后休息一段时间，循环进行。
                </span>
              </section>
              <section>
                <span>
                  <i class="el-icon-warning-outline"></i>
                </span>
                自由班制：没有具体的班次，考勤组人员可以在打卡时段内自由打卡，按照打卡时段统计上班时长。
              </section>
            </div>
          </section>
        </div>
      </template>
    </panel>
    <!-- -0-0-0-0-0- -->
    <RegularClasses v-if="searchForm.name == '3'" />
    <FreeClasses v-if="searchForm.name == '6'" />
    <ArrangeClasses v-if="searchForm.name == '9'" />
  </div>
</template>
<script>
import Panel from "@/components/panel.vue";
import Pagination from "@/components/Pagination/index.vue";
import RegularClasses from './regular-classes.vue'
import ArrangeClasses from './arrange-classes.vue'
import FreeClasses from './free-classes.vue'
export default {
  components: { Panel, Pagination,RegularClasses,ArrangeClasses,FreeClasses },
  data() {
    return {
      checkboxVal:[],
      checkboxList:[
        {label:'星期一'},
        {label:'星期二'},
        {label:'星期三'},
        {label:'星期四'},
        {label:'星期五'},
        {label:'星期六'},
        {label:'星期日'},
      ],
      dataList: [
        { name: "22412" },
        { name: "22412" },
        { name: "22412" },
        { name: "22412" },
      ],
      searchForm: {
        name: "",
      },
    };
  },
};
</script>
<style lang="scss">
::v-deep .group-radio {
  flex-direction: column;
}
</style>

<style scoped lang="scss">
@import '../index.scss';
</style>
